<template>
  <dashboard-layout>
    <!-- 左侧面板 -->
    <template #left-panel>
      <left-panel>
        <weather-panel />
        <water-info />
        <water-level-chart />
        <flow-chart />
        <command-info />
      </left-panel>
    </template>

    <!-- 中间内容区 -->
    <template #center-content>
    </template>

    <!-- 右侧面板 -->
    <template #right-panel>
      <right-panel>
        <reservoir-info/>
        <unit-status />
        <power-generation />
      </right-panel>
    </template>

    <!-- 导航项 -->
    <template #nav-items>
      <div class="nav-item" :class="{ active: activeNav === 'overview' }" @click="handleNavChange('overview')">
        <el-icon><DataAnalysis /></el-icon>
        <span>总览</span>
      </div>
      <div class="nav-item" :class="{ active: activeNav === 'rain' }" @click="handleNavChange('rain')">
        <el-icon><Cloudy /></el-icon>
        <span>雨情查询</span>
      </div>
      <div class="nav-item" :class="{ active: activeNav === 'path' }" @click="handleNavChange('path')">
        <el-icon><Location /></el-icon>
        <span>防汛路径</span>
      </div>
      <div class="nav-item" :class="{ active: activeNav === 'video' }" @click="handleNavChange('video')">
        <el-icon><VideoCamera /></el-icon>
        <span>视频监控</span>
      </div>
    </template>
  </dashboard-layout>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Cloudy, DataAnalysis, Location, VideoCamera } from '@element-plus/icons-vue'
import DashboardLayout from '@/layouts/DashboardLayout.vue'
import LeftPanel from '@/components/LeftPanel.vue'
import RightPanel from '@/components/RightPanel.vue'

import WeatherPanel from './components/WeatherPanel.vue'
import WaterInfo from './components/WaterInfo.vue'
import WaterLevelChart from './components/WaterLevelChart.vue'
import FlowChart from './components/FlowChart.vue'
import CommandInfo from './components/CommandInfo.vue'
import ReservoirInfo from './components/ReservoirInfo.vue'
import UnitStatus from './components/UnitStatus.vue'
import PowerGeneration from './components/PowerGeneration.vue'

const activeNav = ref('overview')

const handleNavChange = (type: string) => {
  activeNav.value = type
  console.log('Navigation changed:', type)
}
</script>

<style lang="scss" scoped>
.floating-info {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 300px;
  z-index: 10;
}
</style> 